// expiremental
var stubE = {};
stubE.Alignment = {};

stubE.Alignment.TestAll = function(delay) {
    for(x = 0; x<13; x++)
    {
        var funcdelay = x*((delay) ? delay : 2);
        var test = 'Case' + (x+1).toString();
        this[test].load.bind(this[test]).delay(funcdelay);
    }
}


stubE.Alignment.Case1 = {
    TestCase: 'stubE.Alignment.Case1 - test right align, default document body ',
    load:function() {
        console.log(this.TestCase);
        stub.Layout.Reset();
        $(document.body).select('*').invoke('remove');
        $(document.body).insert(this.div1 = new Element('div', {id:'div1'}));
        $(document.body).insert(this.div2 = new Element('div', {id:'div2'}));
        $(this.div1, this.div2).invoke('setStyle',{position:'absolute', width:'200px', height:'200px', border:'solid 1pt #999'});       
        stub.Layout.Right(this.div2);
        stub.Layout.Load();
    }
}
stubE.Alignment.Case2 = {
    TestCase: 'stubE.Alignment.Case2 - test bottom align, default document body',
    load:function() {        
        console.log(this.TestCase);
        stub.Layout.Reset();
        $(document.body).select('*').invoke('remove');
        $(document.body).insert(new Element('div', {id:'div1'}));
        $(document.body).insert(new Element('div', {id:'div2'}));
        this.div1 = $('div1');
        this.div2 = $('div2');
        $(this.div1, this.div2).invoke('setStyle',{position:'absolute', width:'200px', height:'200px', border:'solid 1pt #999'});       
        stub.Layout.Bottom(this.div2);
        stub.Layout.Load();
    }
}

stubE.Alignment.Case3 = {
    TestCase: 'stubE.Alignment.Case3 - test bottom and right align, default document body',
    load:function() {        
        console.log(this.TestCase);
        stub.Layout.Reset();
        $(document.body).select('*').invoke('remove');
        $(document.body).insert(this.div1 = new Element('div', {id:'div1'}));
        $(document.body).insert(this.div2 = new Element('div', {id:'div2'}));
        $(this.div1, this.div2).invoke('setStyle',{position:'absolute', width:'200px', height:'200px', border:'solid 1pt #999'});       
        stub.Layout.Bottom(this.div1);
        stub.Layout.Right(this.div2);
        stub.Layout.Load();
    }
}

// Case 4 - all 4 corners
stubE.Alignment.Case4 = {
    TestCase: 'stubE.Alignment.Case4 - all 4 corners',
    load:function() {        
        console.log(this.TestCase);
        stub.Layout.Reset();
        $(document.body).select('*').invoke('remove');
        $(document.body).insert(this.div1 = new Element('div', {id:'div1'}));
        $(document.body).insert(this.div2 = new Element('div', {id:'div2'}));
        $(document.body).insert(this.div3 = new Element('div', {id:'div3'}));
        $(document.body).insert(this.div4 = new Element('div', {id:'div4'}));
        $(this.div1, this.div2, this.div3, this.div4).invoke('setStyle',{position:'absolute', width:'200px', height:'200px', border:'solid 1pt #999'});       
        stub.Layout.Bottom(this.div2);
        stub.Layout.Bottom(this.div4);
        stub.Layout.Right(this.div3);
        stub.Layout.Right(this.div4);
        stub.Layout.Load();
    }
}

stubE.Alignment.Case5 = {
    TestCase: 'stubE.Alignment.Case5 - test right inside parent',
    load:function() {        
        console.log(this.TestCase);
        stub.Layout.Reset();
        $(document.body).select('*').invoke('remove');
        $(document.body).insert(this.div1 = new Element('div', {id:'div1'}));
        this.div1.insert(this.div2 = new Element('div', {id:'div2'}));
        $(this.div1, this.div2).invoke('setStyle',{position:'absolute', width:'200px', height:'200px', border:'solid 1pt #999'});
        $(this.div1).setStyle({
            border:'2pt solid rgb(146, 5, 5)',
            width:'400px',
            height:'340px'});
        stub.Layout.Right(this.div2);
        stub.Layout.Load();
    }
}

stubE.Alignment.Case6 = {
    TestCase: 'stubE.Alignment.Case6 - test right inside parent',
    load:function() {        
        console.log(this.TestCase);
        stub.Layout.Reset();
        $(document.body).select('*').invoke('remove');
        $(document.body).insert(this.div1 = new Element('div', {id:'div1'}));
        this.div1.insert(this.div2 = new Element('div', {id:'div2'}));
        $(this.div1, this.div2).invoke('setStyle',{width:'200px', height:'200px', border:'solid 1pt #999'});
        $(this.div1).setStyle({
            border:'2pt solid rgb(146, 5, 5)',
            width:'400px',
            height:'340px'});
        stub.Layout.Bottom(this.div2);
        stub.Layout.Load();
    }
}


stubE.Alignment.Case7 = {
    TestCase: 'stubE.Alignment.Case7 - parent bottom left child top left',
    load:function() {        
        console.log(this.TestCase);
        stub.Layout.Reset();
        $(document.body).select('*').invoke('remove');
        $(document.body).insert(this.div1 = new Element('div', {id:'div1'}));
        this.div1.insert(this.div2 = new Element('div', {id:'div2'}));
        $(this.div1, this.div2).invoke('setStyle',{position:'absolute', width:'200px', height:'200px', border:'solid 1pt #999'});
        $(this.div1).setStyle({
            border:'2pt solid rgb(146, 5, 5)',
            width:'400px',
            height:'340px'});
        stub.Layout.Bottom(this.div1);
        stub.Layout.Load();
    }
}

stubE.Alignment.Case8 = {
    TestCase: 'stubE.Alignment.Case8 - parent bottom right child top left',
    load:function() {        
        console.log(this.TestCase);
        stub.Layout.Reset();
        $(document.body).select('*').invoke('remove');
        $(document.body).insert(this.div1 = new Element('div', {id:'div1'}));
        this.div1.insert(this.div2 = new Element('div', {id:'div2'}));
        $(this.div1, this.div2).invoke('setStyle',{position:'absolute', width:'200px', height:'200px', border:'solid 1pt #999'});
        $(this.div1).setStyle({
            border:'2pt solid rgb(146, 5, 5)',
            width:'400px',
            height:'340px'});
        stub.Layout.Bottom(this.div1);
        stub.Layout.Right(this.div1);
        stub.Layout.Load();
    }
}

stubE.Alignment.Case9 = {
    TestCase: 'stubE.Alignment.Case9 - parent bottom right child bottom right',
    load:function() {        
        console.log(this.TestCase);
        stub.Layout.Reset();
        $(document.body).select('*').invoke('remove');
        $(document.body).insert(this.div1 = new Element('div', {id:'div1'}));
        this.div1.insert(this.div2 = new Element('div', {id:'div2'}));
        $(this.div1, this.div2).invoke('setStyle',{position:'absolute', width:'200px', height:'200px', border:'solid 1pt #999'});
        $(this.div1).setStyle({
            border:'2pt solid rgb(146, 5, 5)',
            width:'400px',
            height:'340px'});
        stub.Layout.Bottom(this.div1);
        //stub.Layout.Right(this.div1);
        stub.Layout.Bottom(this.div2);
        //stub.Layout.Right(this.div2);
        stub.Layout.Load();
    }
}

stubE.Alignment.Case10 = {
    TestCase: 'stubE.Alignment.Case10 - all 4 corners',
    load:function() {        
        console.log(this.TestCase);
        stub.Layout.Reset();
        $(document.body).select('*').invoke('remove');
        $(document.body).insert(this.div1 = new Element('div', {id:'div1'}));
        $(document.body).insert(this.div2 = new Element('div', {id:'div2'}));
        $(document.body).insert(this.div3 = new Element('div', {id:'div3'}));
        $(document.body).insert(this.div4 = new Element('div', {id:'div4'}));
        div1.insert(this.div5 = new Element('div', {id:'div5'}));
        div2.insert(this.div6 = new Element('div', {id:'div6'}));
        div3.insert(this.div7 = new Element('div', {id:'div7'}));
        div4.insert(this.div8 = new Element('div', {id:'div8'}));
        
        $(this.div1, this.div2, this.div3, this.div4).invoke('setStyle',{position:'absolute', width:'200px', height:'200px', border:'solid 2pt rgb(146, 5, 5)'});       
        $(this.div5, this.div6, this.div7, this.div8).invoke('setStyle',{width:'80px', height:'80px', border:'solid 1pt #999'});       
        stub.Layout.Bottom(this.div2);
        stub.Layout.Bottom(this.div4);
        stub.Layout.Right(this.div3);
        stub.Layout.Right(this.div4);
        stub.Layout.Bottom(this.div6);
        stub.Layout.Right(this.div7);
        stub.Layout.Right(this.div8);
        stub.Layout.Bottom(this.div8);
        
        stub.Layout.Load();
    }
}

stubE.Alignment.Case11 = {
    TestCase: 'stubE.Alignment.Case11 - 2 relative items aligning one bottom',
    load:function() {     
        console.log(this.TestCase);
        stub.Layout.Reset();
        $(document.body).select('*').invoke('remove');
        $(document.body).insert(this.div1 = new Element('div', {id:'div1'}));
        this.div1.insert(this.div2 = new Element('div', {id:'div2'}));
        this.div1.insert(this.div3 = new Element('div', {id:'div3'}));
        
        $(this.div1).setStyle({position:'absolute', padding:'10px',width:'300px', height:'500px', border:'solid 1pt #999'});
        $(this.div2,this.div3).invoke('setStyle',{
            position:'absolute',
            backgroundColor:'rgb(146, 5, 5)',
            width:'30px',
            height:'30px'});
        stub.Layout.Bottom(this.div3);
        //stub.Layout.Right(this.div4);
        //stub.Layout.Bottom(this.div5);
        //stub.Layout.Right(this.div5);
        stub.Layout.Load();
    }
}

stubE.Alignment.Case12 = {
    TestCase: 'stubE.Alignment.Case12 - 2 relative items aligning one bottom and right',
    load:function() {     
        console.log(this.TestCase);
        stub.Layout.Reset();
        $(document.body).select('*').invoke('remove');
        $(document.body).insert(this.div1 = new Element('div', {id:'div1'}));
        this.div1.insert(this.div2 = new Element('div', {id:'div2'}));
        this.div1.insert(this.div3 = new Element('div', {id:'div3'}));
        
        $(this.div1).setStyle({position:'absolute', padding:'10px',width:'300px', height:'500px', border:'solid 1pt #999'});
        $(this.div2,this.div3).invoke('setStyle',{
            position:'absolute',
            backgroundColor:'rgb(146, 5, 5)',
            width:'30px',
            height:'30px'});
        stub.Layout.Right(this.div3);
        stub.Layout.Bottom(this.div3);
        //stub.Layout.Bottom(this.div5);
        //stub.Layout.Right(this.div5);
        stub.Layout.Load();
    }
}

stubE.Alignment.Case13 = {
    TestCase: 'stubE.Alignment.Case 13 - all 4 corners',
    load:function() {     
        console.log(this.TestCase);
        stub.Layout.Reset();
        $(document.body).select('*').invoke('remove');
        $(document.body).insert(this.div1 = new Element('div', {id:'div1'}));
        this.div1.insert(this.div2 = new Element('div', {id:'div2'}));
        this.div1.insert(this.div3 = new Element('div', {id:'div3'}));
        this.div1.insert(this.div4 = new Element('div', {id:'div4'}));
        this.div1.insert(this.div5 = new Element('div', {id:'div5'}));
        
        $(this.div1).setStyle({position:'absolute', padding:'10px',width:'300px', height:'500px', border:'solid 1pt #999'});
        $(this.div2,this.div3, this.div4, this.div5).invoke('setStyle',{
            position:'absolute',
            backgroundColor:'rgb(146, 5, 5)',
            width:'30px',
            height:'30px'});
        stub.Layout.Bottom(this.div3);
        stub.Layout.Right(this.div4);
        stub.Layout.Right(this.div5);
        stub.Layout.Bottom(this.div5);
        stub.Layout.Load();
    }
}

stubE.Fill = {};

stubE.Fill.TestAll = function(delay) {
    for(x = 0; x<10; x++)
    {
        var funcdelay = x*((delay) ? delay : 2);
        var test = 'Case' + (x+1).toString();
        this[test].load.bind(this[test]).delay(funcdelay);
    }
}

stubE.Fill.Case1 = {
    TestCase: 'stubE.Fill.Case1 - fill down single element on page',
    load:function() {
        console.log(this.TestCase);
        stub.Layout.Reset();
        $(document.body).select('*').invoke('remove');
        $(document.body).insert(this.div1 = new Element('div', {id:'div1'}));        
        this.div1.setStyle({position:'absolute', padding:'0px', margin:'25px', width:'300px', height:'500px', backgroundColor:'#999'});
        this.div1 = $('div1');
        stub.Layout.FillDown(this.div1);
        stub.Layout.Load();
    }
}

stubE.Fill.Case2 = {
    TestCase: 'stubE.Fill.Case2 - fill right single element on page',
    load:function() {
        console.log(this.TestCase);
        stub.Layout.Reset();
        $(document.body).select('*').invoke('remove');
        $(document.body).insert(this.div1 = new Element('div', {id:'div1'}));        
        this.div1.setStyle({position:'absolute', padding:'0px', margin:'25px', width:'300px', height:'500px', backgroundColor:'#999'});
        this.div1 = $('div1');
        stub.Layout.FillRight(this.div1);
        stub.Layout.Load();
    }
}

// Case 3 - fill down and fill right
stubE.Fill.Case3 = {
    TestCase: 'stubE.Fill.Case3 - fill down and fill right',
    load:function() {
        console.log(this.TestCase);
        stub.Layout.Reset();
        $(document.body).select('*').invoke('remove');
        $(document.body).insert(this.div1 = new Element('div', {id:'div1'}));        
        this.div1.setStyle({position:'absolute', padding:'0px', margin:'25px', width:'300px', height:'500px', backgroundColor:'#999'});
        this.div1 = $('div1');
        stub.Layout.Fill(this.div1);
        stub.Layout.Load();
    }
}

stubE.Fill.Case4 = {
    TestCase: 'stubE.Fill.Case4 - fill down and fill right with varying left top position and margins',
    load:function() {
        console.log(this.TestCase);
        stub.Layout.Reset();
        $(document.body).select('*').invoke('remove');
        $(document.body).insert(this.div1 = new Element('div', {id:'div1'}));        
        this.div1.setStyle({position:'absolute', padding:'0px', left:'20px', top:'60px', margin:'20px', width:'300px', height:'500px', backgroundColor:'#999'});
        stub.Layout.Fill(this.div1);
        stub.Layout.Load();
    }
}
stubE.Fill.Case5 = {
    TestCase: 'stubE.Fill.Case5 - relative fill down in parent',
    load:function() {
        console.log(this.TestCase);
        stub.Layout.Reset();
        $(document.body).select('*').invoke('remove');
        $(document.body).insert(this.div1 = new Element('div', {id:'div1'})); 
        this.div1.insert(this.div2 = new Element('div', {id:'div2'}));       
        this.div1.setStyle({position:'absolute', padding:'0px', left:'20px', top:'120px', margin:'20px', width:'300px', height:'500px', border:'solid 2px #999'});
        this.div2.setStyle({width:'50px', height:'50px', backgroundColor:'red'});
        stub.Layout.FillDown(this.div2);
        stub.Layout.Load();
    }
}
stubE.Fill.Case6 = {
    TestCase: 'stubE.Fill.Case6 - relative fill right in parent',
    load:function() {
        console.log(this.TestCase);
        stub.Layout.Reset();
        $(document.body).select('*').invoke('remove');
        $(document.body).insert(this.div1 = new Element('div', {id:'div1'})); 
        this.div1.insert(this.div2 = new Element('div', {id:'div2'}));       
        this.div1.setStyle({position:'absolute', padding:'0px', left:'20px', top:'120px', margin:'20px', width:'300px', height:'500px', border:'solid 2px #999'});
        this.div2.setStyle({width:'50px', height:'50px', backgroundColor:'blue'});
        stub.Layout.FillRight(this.div2);
        stub.Layout.Load();
    }
}

stubE.Fill.Case7 = {
    TestCase: 'stubE.Fill.Case7 - relative fill down and right in parent',
    load:function() {
        console.log(this.TestCase);
        stub.Layout.Reset();
        $(document.body).select('*').invoke('remove');
        $(document.body).insert(this.div1 = new Element('div', {id:'div1'})); 
        this.div1.insert(this.div2 = new Element('div', {id:'div2'}));       
        this.div1.setStyle({position:'absolute', padding:'0px', left:'20px', top:'120px', margin:'20px', width:'300px', height:'500px', border:'solid 2px #999'});
        this.div2.setStyle({width:'50px', height:'50px', backgroundColor:'green'});
        stub.Layout.Fill(this.div2);
        stub.Layout.Load();
    }
}

stubE.Fill.Case8 = {
    TestCase: 'stubE.Fill.Case8 - relative fill down 2 absolute positioned item in relative container',
    load:function() {
        console.log(this.TestCase);
        stub.Layout.Reset();
        $(document.body).select('*').invoke('remove');
        $(document.body).insert(this.div1 = new Element('div', {id:'div1'})); 
        this.div1.insert(this.div2 = new Element('div', {id:'div2'}));       
        this.div1.insert(this.div3 = new Element('div', {id:'div3'}));       
        this.div1.setStyle({position:'absolute', padding:'0px', left:'20px', top:'120px', margin:'20px', width:'300px', height:'500px', border:'solid 2px #999'});
        $(this.div2, this.div3).invoke('setStyle', {position:'absolute', width:'50px', height:'50px', backgroundColor:'green'});
        this.div3.setStyle({marginLeft:'100px', backgroundColor:'blue'});
        stub.Layout.FillDown(this.div2);
        stub.Layout.FillDown(this.div3);
        stub.Layout.Load();
    }
}

stubE.Fill.Case9 = {
    TestCase: 'stubE.Fill.Case9 - relative fill down and fill right 2 absolute positioned item in relative container',
    load:function() {
        console.log(this.TestCase);
        stub.Layout.Reset();
        $(document.body).select('*').invoke('remove');
        $(document.body).insert(this.div1 = new Element('div', {id:'div1'})); 
        this.div1.insert(this.div2 = new Element('div', {id:'div2'}));       
        this.div1.insert(this.div3 = new Element('div', {id:'div3'}));       
        this.div1.setStyle({position:'absolute', padding:'0px', left:'20px', top:'120px', margin:'20px', width:'300px', height:'500px', border:'solid 2px #999'});
        $(this.div2, this.div3).invoke('setStyle', {position:'absolute', width:'50px', height:'50px', backgroundColor:'green'});
        this.div3.setStyle({marginLeft:'100px', backgroundColor:'blue'});
        stub.Layout.FillDown(this.div2);
        stub.Layout.FillRight(this.div3);
        stub.Layout.Load();
    }
};

stubE.Fill.Case10 = {
    TestCase: 'stubE.Fill.Case10 - relative fill down and fillboth right 2 absolute positioned item in relative container',
    load:function() {
        console.log(this.TestCase);
        stub.Layout.Reset();
        $(document.body).select('*').invoke('remove');
        $(document.body).insert(this.div1 = new Element('div', {id:'div1'})); 
        this.div1.insert(this.div2 = new Element('div', {id:'div2'}));       
        this.div1.insert(this.div3 = new Element('div', {id:'div3'}));       
        this.div1.setStyle({position:'absolute', padding:'0px', left:'20px', top:'120px', margin:'20px', width:'300px', height:'500px', border:'solid 2px #999'});
        $(this.div2, this.div3).invoke('setStyle', {position:'absolute', width:'50px', height:'50px', backgroundColor:'green'});
        this.div3.setStyle({marginLeft:'50px', backgroundColor:'blue'});
        stub.Layout.FillDown(this.div2);
        stub.Layout.FillDown(this.div3);
        stub.Layout.FillRight(this.div3);
        stub.Layout.Load();
    }
};

stubE.Mix = {};

stubE.Mix.Case1 = {
    TestCase: 'stubE.Mix.Case1 - fill child in container, fill parent bottom viewport',
    load:function() {
        console.log(this.TestCase);
        stub.Layout.Reset();
        $(document.body).select('*').invoke('remove');
        $(document.body).insert(this.div1 = new Element('div', {id:'div1'})); 
        $(document.body).insert(this.div3 = new Element('div', {id:'div3'})); 
        $(document.body).insert(this.div4 = new Element('div', {id:'div4'})); 
        this.div1.insert(this.div2 = new Element('div', {id:'div2'}));       
        this.div1.setStyle({position:'absolute', padding:'0px', left:'20px', top:'120px', margin:'20px', width:'100px', height:'200px', border:'solid 2px #999'});
        this.div3.setStyle({position:'absolute', padding:'0px', left:'220px', top:'0px', margin:'20px', width:'100px', height:'200px', backgroundColor:'yellow'});
        this.div4.setStyle({position:'absolute', padding:'0px', left:'420px', top:'10px', margin:'20px', width:'250px', height:'350px', border:'solid 2px #999'});
        //this.div4.insert(this.div6 = new Element('div', {id:'div6'}));       
        this.div4.insert(this.div5 = new Element('div', {id:'div5'}));       
        this.div2.setStyle({position:'absolute', width:'50px', height:'50px', backgroundColor:'green'});
        this.div5.setStyle({position:'absolute', width:'50px', height:'50px', backgroundColor:'orange'});
        //this.div6.setStyle({position:'absolute', width:'50px', height:'50px', marginLeft:'50px', marginTop:'30px', backgroundColor:'tan'});
        stub.Layout.FillDown(this.div1);
        stub.Layout.FillDown(this.div2);
        stub.Layout.FillDown(this.div4);
        stub.Layout.Bottom(this.div3,[-100]);
        stub.Layout.Bottom(this.div5);
        //stub.Layout.Bottom(this.div6);
        stub.Layout.Load();
    }    
}
